<template>
  <div class="bigBox">
    <div class="box">
      <button @click="close">X</button>
      <h2> 就诊记录详情</h2>
      <h3>就诊日期:{{ select.length ? select[0].date :'' }}</h3>
      <h3>医生姓名:{{ select.length ? select[0].uname :''}}</h3>
      <h3>诊断结果:{{ select.length ? select[0].result :'' }}</h3>
      <h3>处方信息:{{ select.length ? select[0].information :'' }}</h3>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      flag:false,
    }
  },
  props: {
    select: {
      type: Array,
      require: true,
    },
  },
  
  // watch:{
  //   select:{
  //     deep:true,
  //     handler(newvalue){
  //       console.log(newvalue);
  //     },
  //   },
  // },

  methods:{
    close(){
      this.$emit("close",this.flag)
    }
  },
};
</script>

<style scoped>
button{
  position: absolute;
  right: 0;
}
.bigBox {
  position: relative;
background-color: rgba(0, 0, 0, 0.7);
 /* 使用固定定位让元素撑满全屏 */
 position: fixed;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
}
.box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  padding-left: 20px;
  width: 250px;
  border: 1px solid #ccc;
  background-color: #fff;
}
</style>
